<template>
  <div class="box">{{ a }}</div>
  <Select filterable v-model="value" @on-query-change="onChange">
    <Option v-for="(item, index) in list" :key="index" :value="item.text"></Option>
  </Select>
  <!-- <Select :remote-method="getData1" filterable :loading="loading1">
		<Option v-for="item in list" :key="item.id" :value="item.text">{{ item.text }}</Option>
	</Select> -->
  <!-- <Select v-model="model" filterable :remote-method="remoteMethod1" :loading="loading1">
		<Option v-for="(option, index) in options1" :value="option.value" :key="index">{{ option.label }}</Option>
	</Select> -->
  <Row>
    <Col span="12">
      <Button type="default" @click="add">测试</Button>
    </Col>
  </Row>
</template>
<script>
export default {
  name: 'myBox',
  data() {
    return {
      a: 1,
      b: 2,
      loading: false,
      loading1: false,
      list: [],
      value: '',
      test: [
        'Alabama',
        'Alaska',
        'Arizona',
        'Arkansas',
        'California',
        'Colorado',
        'Connecticut',
        'Delaware',
        'Florida',
        'Georgia',
        'Hawaii',
        'Idaho',
        'Illinois',
        'Indiana',
        'Iowa',
        'Kansas',
        'Kentucky',
        'Louisiana',
        'Maine',
        'Maryland',
        'Massachusetts',
        'Michigan',
        'Minnesota',
        'Mississippi',
        'Missouri',
        'Montana',
        'Nebraska',
        'Nevada',
        'New hampshire',
        'New jersey',
        'New mexico',
        'New york',
        'North carolina',
        'North dakota',
        'Ohio',
        'Oklahoma',
        'Oregon',
        'Pennsylvania',
        'Rhode island',
        'South carolina',
        'South dakota',
        'Tennessee',
        'Texas',
        'Utah',
        'Vermont',
        'Virginia',
        'Washington',
        'West virginia',
        'Wisconsin',
        'Wyoming'
      ],
      model: '',
      loading1: false,
      options1: []
    }
  },
  methods: {
    add() {
      console.log(`helloworld`)
      this.a++
    },
    onChange(query) {
      console.log('query', query)
      if (query) {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          let filterList = this.listOrigin.filter((res) => res.text.includes(query))
          this.list = filterList
        }, 1e3)
      } else {
        this.list = []
      }
    },
    remoteMethod1(query) {
      if (query !== '') {
        console.log(1)
        this.loading1 = true
        setTimeout(() => {
          this.loading1 = false
          const list = this.test.map((item) => {
            return {
              value: item,
              label: item
            }
          })
          this.options1 = list.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1)
        }, 200)
      } else {
        console.log(2)
        this.options1 = []
      }
    }
  },
  mounted() {
    this.listOrigin = this.test.map((res, index) => {
      return {
        text: res,
        id: index,
        value: res,
        label: res
      }
    })
  }
}
</script>
<style lang="scss" scoped>
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
</style>
